<template>
  <div class="login_box">
    <div class="login_con">
      <el-row style="text-align: center;height: 75px;">
        <img src="~@/assets/images/loginTT.png" alt="" style="vertical-align: middle;padding-bottom: 8px;background-color: deepskyblue;border-radius: 8px;">
      </el-row>
      <el-row>
        <el-col :span="12" class="lef_img">
          <img src="~@/assets/bank.png" width="100%">
        </el-col>
        <el-col :span="12" class="rig_img">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="tenantCode">
              <el-select v-model.trim="ruleForm.tend" placeholder="请选择租户" size="small" style="width:200px">
                <el-option :label="ele.tenantName" :value="ele.tenantCode" v-for="(ele,index) in ruleForm.transCodeOption" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="user">
              <el-input size="small" v-model.trim="ruleForm.user" prefix-icon="el-icon-user" placeholder="请输入帐号" class="lef_con" @blur="getImgCode"></el-input>
            </el-form-item>
            <el-form-item prop="pas">
              <el-input size="small" type="password" v-model="ruleForm.pas" prefix-icon="el-icon-lock" placeholder="请输入密码" class="lef_con" :show-password="false"></el-input>
            </el-form-item>
            <el-form-item prop="imgCode" v-if="showCode==true">
              <el-input size="small" v-model.trim="ruleForm.imgCode" prefix-icon="el-icon-picture-outline" placeholder="请输入验证码" class="lef_con imgCode"></el-input>
              <img :src="imgCodeBase64" alt="" class="imgBox" @click="getImgCode">
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" style="width:200px" @click="goLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {cmcUrl} from '../../../static/baseUrl'
  export default {
    data() {
      return {
        showCode: false,
        imgCodeBase64:'',
        ruleForm:{
          transCodeOption:[],
          tend:'',
          user:'',
          pas:'',
          imgCode:''
        },
        rules:{
          user:[
            {required: true, message: '请输入账号', trigger: 'blur'}
          ],
          pas:[
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          imgCode:[
            {required: true, message:'请输入验证码', trigger:'blur'}
          ]
        }
      }
    },
    created() {
      this.getTransCode()
      //this.getImgCode()
    },
    computed:{

    },
    watch:{

    },
    methods: {
      //获取当前登录用户的分支行信息
      getBranchInfo(){
        this.$axios({
            method: "post",
            url: `/CMC/user/info/getBranch`,
            data: "",
          })
          .then((res) => {
            console.log(res, "分支行数据");
            let branch = "";
            let subBranch = "";
            if (res.code == 200) {
              if(res.data){
                if(res.data.branch){
                  branch = res.data.branch.CODE;
                }

                if(res.data.subBranch){
                  subBranch = res.data.subBranch.CODE;
                }
              }
              localStorage.setItem('BRANCH',branch);
              localStorage.setItem('SUBBRANCH',subBranch);
            } else {
              console.log("获取分支行，失败！")
            };

          })
          .catch((err) => {});
      },
      getTransCode(){
        this.$requestA.get('/IAM/api/tenant',{},res=>{
          if(res.code == '200' && res.data.length){
            for (const key in res.data) {
              this.ruleForm.transCodeOption.push({
                tenantCode:res.data[key].tenantCode,
                tenantName:res.data[key].tenantName
              })
            }
            this.ruleForm.tend = this.ruleForm.transCodeOption[0].tenantCode
          }
        })
      },
      getImgCode(){
        if(this.ruleForm.user){
          this.$requestA.get('/IAM/api/captcha?user='+this.ruleForm.user,{},res=>{
            this.imgCodeBase64 = res.data.image
            this.showCode = true
            localStorage.setItem('imgKey',res.data.key)
          })
        }

      },
      goLogin(){
        this.$refs.ruleForm.validate((valid) => {
          console.log(valid)
          if (valid) {
            this.getToken()
          } else {
            return false;
          }
        });
      },
      getToken(){
        localStorage.setItem('imgCode',this.ruleForm.imgCode)
        const data = {
          password:this.$md5(this.ruleForm.pas),
          tenantCode:this.ruleForm.tend,
          userCode:this.ruleForm.user,
          isEncryption:'1'
        }
        this.$requestA.post('/IAM/login',data,res => {
          if(res.code != '200'){
            this.getImgCode();
            return false
          }

          let tenantStr = "";
          Object.keys(this.ruleForm.transCodeOption).forEach((item) => {
            let ss = this.ruleForm.transCodeOption[item];
            if(ss.tenantCode == this.ruleForm.tend){
              tenantStr = ss.tenantName;
            }
          });
          this.showCode = false
          localStorage.setItem('TENANT_NAME',tenantStr)
          localStorage.setItem('loginCode',this.ruleForm.user)
          localStorage.setItem('Access-Token',res.data.token)
          localStorage.setItem('TENANT_ID',res.data.tenantId)
          localStorage.setItem('USER_ID',res.data.userId)
          localStorage.setItem('USER_CODE',res.data.userCode)
          localStorage.setItem('TENANT_CODE',this.ruleForm.tend)
          localStorage.setItem('User_Name',res.data.userName)

          this.getBranchInfo();
          this.$router.push({path:'/'})
        },err=>{
          this.getImgCode();
        })
      }
    },
  }
</script>

<style scoped>
.login_box{
  width: 100%;
  height: 100vh;
  background:#f0f2f5 url(~@/assets/bg.png) no-repeat fixed;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_con{
  /* position: absolute; */
  max-width: 600px;
  /* width: 600px; */
  background: #fff;
  padding: 30px;
  border-radius: 10px;
}
.lef_img{
  padding: 20px;
    border-right: 1px dashed #b5b5b5;
}
.rig_img{
  padding-left: 25px;
}
.lef_con{
  width: 200px;
}
.imgCode{
  width: 130px;
}
.imgBox{
  display: inline-block;
    width: 66px;
    height: 29px;
    position: absolute;
    top: 4px;
    left: 135px;
}
</style>
